<template>
  <div>
    <!-- 搜索栏 -->
    <el-form :inline="true" :model="search" class="demo-form-inline">
      <el-form-item label="关键字">
        <el-input v-model="search.keyWords" placeholder="关键字"></el-input>
      </el-form-item>
      <el-form-item label="开始日期">
        <el-date-picker
          v-model="search.start"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束日期">
        <el-date-picker
          v-model="search.end"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- /搜索栏 -->
    <div style="margin-bottom: 15px" class="btns">
      <el-button type="success" @click="$router.push('/itemAdd')"
        >增加商品</el-button
      >
      <download-excel
        class="btn btn-default"
        :data="items"
        :fields="json_fields"
        worksheet="My Worksheet"
        name="商品列表.xls"
      >
        <el-button>导出excel</el-button>
      </download-excel>
    </div>
    <!-- 商品分类列表 -->
    <el-table :data="items" :height="400" style="width: 100%">
      <el-table-column prop="name" label="商品名称"> </el-table-column>
      <el-table-column prop="desc" label="商品描述">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" placement="bottom">
            <div slot="content" style="width: 400px">
              {{ scope.row.desc }}
            </div>
            <span>
              {{
                scope.row.desc
                  ? scope.row.desc.length > 15
                    ? scope.row.desc.substr(0, 15) + "..."
                    : scope.row.desc
                  : "暂无描述"
              }}
            </span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格"> </el-table-column>
      <el-table-column prop="sale" label="销量">
        <template slot-scope="scope">
          <el-tag :color="scope.row.sale > 500 ? 'red' : 'green'">
            {{ scope.row.sale }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="onSale" label="上下架">
        <template slot-scope="scope">
          {{ scope.row.onSale ? "上架" : "下架" }}
        </template>
      </el-table-column>
      <el-table-column prop="thumb" label="商品封面">
        <template slot-scope="scope">
          <img :src="scope.row.thumb" width="100px" />
        </template>
      </el-table-column>
      <el-table-column prop="createAt" label="上架时间"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="delItem(scope.row.id)" type="danger"
            >删除</el-button
          >
          <el-button size="mini" @click="editItem(scope.row.id)" type="primary"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- /商品分类列表 -->
    <!-- 分页组件 -->
    <el-pagination
      :page-size="pageSize"
      layout="prev, pager, next, sizes, jumper, ->, total"
      @size-change="sizeChange"
      @current-change="pageChange"
      :total="total"
    >
    </el-pagination>
    <!-- /分页组件 -->
  </div>
</template>

<script>
import { fetchItems, delItem } from '_api'
export default {
  name: 'ItemLists',
  data () {
    return {
      json_fields: {
        序号: 'id',
        商品名: 'name',
        价格: 'price',
        销量: 'sale'
      },
      search: {
        keyWords: '',
        start: '', // 开始事件
        end: '' // 结束时间
      },
      page: 1,
      pageSize: 10,
      total: 0,
      items: []
    }
  },
  methods: {
    editItem (id) {
      // 跳转到修改商品
      this.$router.push({
        path: '/itemUpdate',
        query: {
          id
        }
      })
    },
    delItem (id) {
      // 删除商品
      this.$confirm('此操作会彻底删除该商品，确定继续吗?', '删除').then(() => {
        delItem(id).then((res) => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.msg,
              duration: 1500,
              onClose: () => {
                this.$router.go(0)
              }
            })
          } else {
            this.$message({
              type: 'error',
              message: res.data.msg,
              duration: 1500
            })
          }
        })
      })
    },
    pageChange (page) {
      // 分页组件改变 当前页
      this.page = page
      this.fetchItems()
    },
    sizeChange (pageSize) {
      this.pageSize = pageSize
      this.fetchItems()
      // 分页组件改变一页多少条
    },
    // 请求商品分类列表数据
    fetchItems () {
      fetchItems({
        ...this.search,
        page: this.page,
        pageSize: this.pageSize
      }).then((res) => {
        if (res.data.code === 200) {
          this.items = res.data.data.list
          this.total = res.data.data.total
        }
      })
    },
    onSearch () {
      // 查询事件
      this.fetchItems()
    }
  },
  created () {
    this.fetchItems()
  }
}
</script>

<style lang="scss" scoped>
.btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
